
<template>
    <div class="container block">
        <div class="table">
            <el-table
                :data="tableData"
                style="width: 100%"
                :header-row-style="{ color: '#202536' }"
                :row-style="{ color: '#5E617D' }"
            >
                <el-table-column label="操作类型">
                    <template #default="scope">
                        <div >
                            {{scope.row.status==0?'账户充值':scope.row.status==1?'账户充值':scope.row.status==3?'已提现': scope.row.status==4?'账户转出':scope.row.status==5?'账户转入':'账户充值' }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="操作时间" />
                <el-table-column label="操作金额">
                    <template #default="scope">
                        <div >
                            ¥{{scope.row.rechargeAmount}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作方式">
                    <template #default="scope">
                        <div >
                            {{scope.row.payMode == 1 ? '公对公' : scope.row.payMode == 1 ? '微信' : '--'}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="idCardNo" label="查看凭证">
                    <template #default="scope">
                       <div>
                            <el-image
                                v-if="scope.row.voucherUrl"
                                style="width: 38px; height: 38px"
                                :src="scope.row.voucherUrl"
                                :zoom-rate="1.2"
                                :preview-src-list="[scope.row.voucherUrl]"
                                :initial-index="4"
                                fit="cover"
                            />
                            <div v-else>--</div>
                       </div>
                    </template>
                </el-table-column>
                <!-- voucherUrl -->
                <el-table-column label="操作状态">
                    <template #default="scope">
                        <div :class="['color-green',scope.row.status == 0 ? 'color-red' : '',scope.row.status == 2 ? 'color-red' : '']">
                            {{scope.row.status==0?'审核中':scope.row.status==1?'充值成功':scope.row.status==3?'已提现': scope.row.status==4?'转出成功':scope.row.status==5?'转入成功':'已驳回' }}
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                class="pagination"
                v-model:currentPage="pageNum"
                v-model:page-size="pageSize"
                :page-sizes="[10, 30, 50, 100]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="getBillRecord"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { BillDto } from '@/api/bill'
import { billRecord, billTeamRecord } from '@/api/insure-deduction'
export default defineComponent({
    name: 'InsureTeamBill',
    data () {
        return {
            pageSize: 10, // 每页显示十条
            pageNum: 1, // 页数为1
            total: 0, // 总的为0
            tableData: [] as BillDto[] // 如同BillDto的数据
        }
    },
    created () { // 创建
        this.getBillTeamRecord()
    },
    methods: {
        async getBillTeamRecord () {
            const result = await billTeamRecord({
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                insureCompanyType: 'insure_type_tyrb'
            })
            console.log(result, 'result')
            this.total = result.totalCount
            this.tableData = result.list
        },
        handleSizeChange () {
            this.pageNum = 1
            this.getBillTeamRecord()
        }
    }
})
</script>
<style lang="stylus" scoped>
table()
.block{
    padding: 0px 24px
}
:deep() .month-picker
    position relative
    top -10px
    left 0
    margin-top -10px
    font-size 15px
:deep() .el-input--prefix .el-input__inner
    padding-right 0
    background white
    border unset
    position relative
.tab-img
    width 38px
    height 38px
</style>
